( Day 3.2 ) HTML 格式規範

2023 iThome 鐵人賽

DAY 3

Modern Web

跟著 OXXO 一起學 HTML系列第 4 篇

15th鐵人賽 html html教學

oxxo

2023-09-03 01:00:56

516 瀏覽

分享至

雖然 HTML 是一種容錯彈性很大的標記語言，就算格式或語法寫錯還是可以顯示 ( 但結果可能會不如預期 )，但在撰寫語法上仍然要遵照一些格式規範，才能確保產生出正確的顯示結果，未來也才能更有效無誤的串接其他程式語言，這篇文章會介紹 HTML 應該注意的一些格式規範。

原文參考：HTML 格式規範

必須要有 DOCTYPE

<!DOCTYPE html> 會放在所有 HTML 的開頭，主要定義 HTML 的類型（ doctype )，意思是告訴瀏覽器這份文件是 HTML5 的規範，只要是網頁都需會放入。

<!DOCTYPE html>
<html>
  <head>
    <title>OXXO.STUDIO</title>
  </head>
  <body>
    <p>我是內容</p>
  </body>
</html>

必須要有 html、head、body

<html>、<head>和<body>三個標籤是網頁 HTML 的基本架構，任何一個網頁都必須要包含這三個元素 ( 雖然缺少後可能還能正常顯示，但往往在功能與架構上就會出錯 )。

好的範例：

<!DOCTYPE html>
<html>
  <head>
    <title>OXXO.STUDIO</title>
  </head>
  <body>
    <h1>OXXO.STUDIO</h1>
    <p>hello world<p>
  </body>
</html>

不好的範例：

<!DOCTYPE html>
<h1>OXXO.STUDIO</h1>
<p>hello world<p>

HTML 副檔名使用 .html

過去在 HTML 尚未完全普及前，可使用 .htm 的副檔名，但只要是 HTML 檔案，一律存檔為 .html 格式 ( 雖然 .htm 也支援，但相對來說比較不好 )

檔案名稱使用小寫字母

雖然在 HTML 存檔時可以用大小寫命名，例如 Apple.html 和 apple.html，但不同的瀏覽器會有不同的讀取規則，有些瀏覽器會區分檔名的大小寫，有些瀏覽器則會認為是同一個檔案，因此建議檔案名稱一律使用小寫字母，並且避免特殊字元或中文字 ( 因這些文字也會被轉換成字母和數字 )。

替網頁加上語系與編碼規則

編輯網頁 HTML 完成後，可以在 html 標籤裡加上 lang 屬性標記語系，新增 meta 標籤標記編碼規則，如此一來可以提供搜尋引擎和瀏覽器更多資訊 ( 有些瀏覽器甚至會因為語系進行自動切換 )。

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

注意結尾標籤

HTML 裡大多數的元素都具有開頭標籤和結尾標籤，因此撰寫 HTML 時，除了空元素 ( 例如圖片 <img> )，其他元素必須都要加上結尾標籤 ( 雖然在某些情況下也可以正常顯示，但往往會造成整體 HTML 架構錯亂 )。

好的範例：
```
<h1>OXXO.STUDIO</h1>
<p>hello world<p>
```
不好的範例：
```
<h1>OXXO.STUDIO
<p>hello world
```

標籤和屬性使用小寫字母

HTML 所有元素都是由「標籤」組成，標籤裡的字母 ( 包含屬性名稱 ) 一率使用「小寫」字母 ( 雖然大小寫混用還是可以正常運作，但通常任何一個常寫程式開發者都不會這樣做，這麼做也會造成整體程式碼不容易閱讀，且容易出錯 )。

好的範例：

<h1>OXXO.STUDIO</h1>
<p>hello world<p>
<a href="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>

不好的範例：

<H1>OXXO.STUDIO</H1>
<P>hello world<p>
<a HREF="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>

屬性的值加上引號

撰寫 HTML 元素屬性的「值」，一律需要加上「引號」( 建議雙引號 )，否則除了會讀取不到屬性的值，更會發生值與屬性混淆的狀況。

好的範例：
```
<p class="content">hello world<p>
```
不好的範例：
```
<p class=content>hello world<p>
```

等號前後不要有空白

因為 HTML 元素的屬性使用「空白」分隔，因此在撰寫屬性和值的時候，等號前後不要加上空白。

好的範例：

<p class="content" style="color:red;">hello world<p>

不好的範例：

<p class = "content" style = "color:red;">hello world<p>

加上換行與縮排

通常 HTML 都會是「巢狀元素」的結構，將不同「層級」元素「分行」以及加上「縮排」 ( 通常是一個 tab 或兩個空白 )，可以讓整個 HTML 更加容易閱讀理解 ( 詳細參考：HTML 縮排與註解 )。

好的範例：

<body>
  <p class="content" style="color:red;">hello world<p>
  <ul>
    <li>清單 1</li>
    <li>清單 2</li>
  </ul>
</body>

不好的範例：

<body>
<p class="content" style="color:red;">hello world<p>
<ul><li>清單 1</li><li>清單 2</li></ul>
</body>

使用空格、換行和特殊符號需要注意

雖然在 HTML 直接打入內容也可以呈現 ( 在不加上任何標籤的狀況下 )，不過由於 HTML 是「標記語言」，並非「純文字」，因此無法正常顯示一些常見的字元 ( 例如「連續」空格、<標籤>或換行 )，如果要使用，則必須使用對應的標記語言，以下方的程式為例，使用 ( Non-Breaking Space ) 表示空白，以 < 表示 <，> 表示 >， <br/> 表示換行，就能正常顯示內容。

<p>無法連續空白：空白開始        空白結束</p>
<p>連續空白：空白開始       空白結束</p>
<p>無法出現標籤：<span></span></p>
<p>出現標籤：<span></p>
<p>不能換行
  不能換行
</p>
<p>
  可以換行
  <br/>
  可以換行
<p>

空元素後方的斜線

HTML 的空元素沒有結尾標籤，因此在原本的標籤後方，不論加上斜線或不加斜線都是允許且常見的語法，需要注意的是，如果一份 HTML 裡所有空元素的結尾都有斜線，那麼就都加上斜線，如果沒有斜線就不要加斜線，盡可能不要混用不同的寫法，例如下面兩種寫法都是被允許的。

沒有斜線

<img src="https://steam.oxxostudio.tw/demo.jpg">

有斜線

<img src="https://steam.oxxostudio.tw/demo.jpg" />

小結

由於 HTML 的容錯彈性很大，所以就更需仰賴使用者自己的撰寫習慣，一個具有優良規範的網站，不僅在程式架構的理解上都更為簡便，也更容易與其他的服務與應用搭配。

跟著 OXXO 一起學 HTML系列第 4 篇